<template>
  <div ref="com-web-me-skills-chart" class="com-web-me-skills-chart">
    <w-modal v-model="popData.isShow" :title="popData.title" :footer-hide="true">
      <p
        v-for="(v, k) in popData.dataArr"
        :key="k"
        style="line-height: 20px; margin: 7px;"
      >
        {{ v }}
      </p>
    </w-modal>
  </div>
</template>

<script lang="ts">
import ECharts from 'echarts'
import { Vue, Component, Prop } from 'vue-property-decorator'
import Skills from '@/models/skills'
import WModal from '@/components/global/modal'
import { Pop } from './index'

@Component({
  name: 'ComWebMeSkillsChart',
  components: {
    WModal
  },
  head () {
    return {
      script: [
        {
          src: 'https://cdn.wangyabin.top/Extension/echarts/echarts.min.js',
          id: 'echarts-script',
          body: true,
          defer: false
        }
      ]
    }
  }
})
export default class ComWebMeSkillsChart extends Vue {
  @Prop({ default: () => [] }) chartData!: Array<Skills>
  // 图表对象
  chart: ECharts.ECharts | null = null
  // 弹窗数据
  popData: Pop = {
    isShow: false,
    dataArr: [],
    title: ''
  }

  mounted () {
    this.echartsInit()
  }

  echartsInit () {
    const el = this.$refs['com-web-me-skills-chart'] as HTMLDivElement
    this.chart = ECharts.init(el)
    this.setDara()
  }

  setDara () {
    const xAxisData = this.chartData.map((item) => {
      return {
        value: item.name,
        textStyle: {
          fontSize: 16
        }
      }
    })
    const datas = this.chartData.map(item => item.num)
    const option = {
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: 10,
        left: 30,
        right: 0,
        bottom: 30,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          barWidth: '60%',
          data: datas,
          itemStyle: {
            normal: {
              color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#83bff6'
                },
                {
                  offset: 0.5,
                  color: '#188df0'
                },
                {
                  offset: 1,
                  color: '#188df0'
                }
              ])
            },
            emphasis: {
              color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2378f7'
                },
                {
                  offset: 0.7,
                  color: '#2378f7'
                },
                {
                  offset: 1,
                  color: '#83bff6'
                }
              ])
            }
          }
        }
      ]
    }
    this.chart!.setOption(option as any)
    this.chart!.on('click', (params: { dataIndex: number }) => {
      const skillsModel = this.chartData[params.dataIndex]
      this.popData.dataArr = skillsModel.show.split('\n')
      this.popData.title = skillsModel.name
      this.popData.isShow = true
    })
  }
}
</script>

<style scoped lang="less">
.com-web-me-skills-chart {
  height: 400px;
}
</style>

<style lang="less">
.com-web-me-skills-chart-pop {
  .el-dialog__body {
    padding-top: 0px !important;
  }
}
</style>
